<template>
  <div class="box">
    <div
      style="height: 1060px"
      :class="{
        box_page_left: nextLeftStatus,
        box_page_right: nextRightStatus,
      }"
    >
      <div
        class="box_item"
        v-show="index > current - 1 && index < current + 4"
        v-for="(item, index) in teacherData"
        :key="index"
      >
        <div>
          <img class="box_img" :src="item.img" alt="" />
        </div>
        <div class="box_right">
          <div class="box_name">{{ item.name }}</div>
          <div class="box_text">
            <span class="box_text_hd"> 老师简介 </span>
            <span>:{{ item.text }}</span>
          </div>
          <div class="box_experience">{{ item.experience }}</div>
        </div>
      </div>
    </div>
    <div class="left_button" @click="nextLeft()">
      <Icon style="font-size: 80px" type="ios-arrow-dropleft-circle" />
    </div>
    <div class="right_button" @click="nextRight()">
      <Icon style="font-size: 80px" type="ios-arrow-dropright-circle" />
    </div>
  </div>
</template>
  <script>
export default {
  name: "header",
  props: {
    url: {
      type: String,
      default: function () {
        return "";
      },
    },
  },
  data() {
    return {
      current: 0,
      nextLeftStatus: false,
      nextRightStatus: false,
      teacherData: [
        {
          name: "武老师",
          img: "https://www.diantangkeji.com:8084/static/20250511/f926e6d99a78494e9265805c1d9b120c.png",
          text: "省属高校教授，浙江大学公共管理学博士，主要研究方向：家庭金融、数字经济、公共管理、劳动经济。已在 CSSCI/SSCI 期刊发表论文 40 余篇，共有 5 篇文章被人大资料转载。",
          experience: "已有10年辅导经验，辅导学员30人。",
        },
        {
          name: "付老师",
          img: "https://www.diantangkeji.com:8084/static/20250511/f597a1476a11409a95d7eeaef02a3d1b.png",
          text: "省属高校副教授，南京大学计算机系计算机图像专业博士，主要研究方向：计算机视觉，目标检测，图像分割，医学图像处理。已发表SCI（一区）一作10篇，SCI（三区）二作10篇，CCF会议一作5篇。",
          experience: "已有5年辅导经验，辅导学员18人。",
        },
        {
          name: "张老师",
          img: "https://www.diantangkeji.com:8084/static/20250511/485d44ab39984fd6b67561bd072ed76e.png",
          text: "省属高校讲师，香港城市大学生物医学工程专业博士，主要研究方向有生物医学工程，药学，传感器。已发表SCI（一区）一作5篇，二区5篇。",
          experience: "已有4年辅导经验，辅导学员12人。",
        },
        {
          name: "刘老师",
          img: "https://www.diantangkeji.com:8084/static/20250511/45c7e32b60f149719d841c36502ad796.png",
          text: "北京邮电大学信息与通信工程专业博士，主要研究方向：分布式学习，在线学习，资源分配。已发表SCI一区一作3篇，CCF-A会议一作一篇。",
          experience: "已有3年辅导经验，辅导学员8人。",
        },
        {
          name: "米老师",
          img: "https://www.diantangkeji.com:8084/static/20250512/845f47658781485e87b63d9b501b2e59.png",
          text: "中国人民大学法学院宪法行政法专业博士，主要研究方向有行政体制改革、立法学、行政法和基层法治。核心期刊8篇,其中（一作)5篇。",
          experience: "已有5年辅导经验，辅导学员18人。",
        },
        {
          name: "张老师",
          img: "https://www.diantangkeji.com:8084/static/20250512/eb687d3f199c4439a5c333d46320a40e.png",
          text: "上海财经大学，商学院管理学专业博士，主要研究方向有组织战略，公司治理，创业管理，企业社会责任。已发表CSSCI一作4篇，SCI（JCR一区）一作2篇，SCI（JCR二区）四作1篇。",
          experience: "已有3年辅导经验，辅导学员9人。",
        },
        {
          name: "朱老师",
          img: "https://www.diantangkeji.com:8084/static/20250512/a2050883eff147a29cff20e83f0b4f27.png",
          text: "南开大学文学院比较文学与世界文学专业博士，主要研究方向有西方文学、文艺理论、现当代文学。已发表CSSCI，北核，AMI核心等十余篇。国家社科基金两项。",
          experience: "已有2年辅导经验，辅导学员4人。",
        },
        {
          name: "冯老师",
          img: "https://www.diantangkeji.com:8084/static/20250512/c30bab420aaf482d8713c94ce26c530b.png",
          text: "澳门科技大学人文艺术学院美术学专业博士，主要研究方向有博物馆、艺术理论、展陈、记忆、媒介表达、文化重构。CSSCI/南大核心2篇、省级刊物4篇、在投2篇。",
          experience: "已有2年辅导经验，辅导学员5人。",
        },
        {
          name: "胡老师",
          img: "https://www.diantangkeji.com:8084/static/20250512/85c4babedbb34f83aab418a5acffa493.png",
          text: "浙江大学材料学专业博士毕业。主要研究方向：热电材料/热电器件，已发表SCI（一区）一作5篇，二区6篇。",
          experience: "已有3年辅导经验，辅导学员8人。",
        },
        {
          name: "冯老师",
          img: "https://www.diantangkeji.com:8084/static/20250512/26aaa5cc20664123af842a0f47a9a7c8.png",
          text: "中国科学院博士。主要研究方向：高性能计算、人工智能、芯片架构。已发表SCI(一区)一作1篇，(二区)一作3篇。",
          experience: "已有3年辅导经验，辅导学员9人。",
        },
        {
          name: "李老师",
          img: "https://www.diantangkeji.com:8084/static/20250512/cca69c574a55400fbef1e9c5daf8142a.png",
          text: "复旦大学临床医学专业博士，主要研究方向：心脏重症、脓毒症、器官功能不全、主动脉夹层。已发表SCI（一区）一作1篇，SCI（三区）一作1篇，SCI（四区）4篇，核心一作1篇。已有2年辅导经验，辅导学员5人。",
          experience: "已有2年辅导经验，辅导学员5人。",
        },
        {
          name: "郝老师",
          img: "https://www.diantangkeji.com:8084/static/20250512/818fa2d43a3b487983fe7df8be10068a.png",
          text: "北京协和医学院生物信息学专业博士，主要研究方向：生物信息学，网络药理学等。已发表SCI(一区)一作1篇，SCI（二区）一作2篇，SCI(三区)一作4篇。",
          experience: "已有3年辅导经验，辅导学员10人。",
        },
      ],
    };
  },
  methods: {
    nextLeft() {
      if (this.nextRightStatus) return;
      if (this.nextLeftStatus) return;
      if (this.current > 0) {
        let _this = this;
        this.nextLeftStatus = true;
        setTimeout(() => {
          _this.current -= 4;
          _this.nextLeftStatus = false; // 重置动画状态
        }, 1400);
      } else {
        this.$Message.warning("已到顶");
      }
    },
    nextRight() {
      if (this.nextLeftStatus) return;
      if (this.nextRightStatus) return;
      let _this = this;
      if (_this.current < 8) {
        this.nextRightStatus = true;
        setTimeout(() => {
          _this.current += 4;
          _this.nextRightStatus = false; // 重置动画状态
        }, 1400);
      } else {
        this.$Message.warning("已到顶");
      }
    },
  },
};
</script>

  <style scoped>
.box {
  position: relative;
  margin: 0 auto;
  width: 1302px;
  /* 其他样式设置，比如背景尺寸、重复等 */
  background-size: 100% 80%; /* 让背景图片覆盖整个元素 */
  background-position: center; /* 背景图片居中显示 */
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.box_page_right {
  animation: slideRight 3s linear;
}
.box_page_left {
  animation: slideLeft 3s linear;
}
.left_button {
  position: absolute;
  top: 50%;
  left: -10%;
}
.left_button:hover {
  position: absolute;
  top: 50%;
  left: -10%;
  color: #0c9aed;
  cursor: pointer;
}
.right_button {
  position: absolute;
  top: 50%;
  right: -10%;
}
.right_button:hover {
  position: absolute;
  top: 50%;
  right: -10%;
  color: #0c9aed;
  cursor: pointer;
}
.box_item {
  margin-bottom: 26px;
  width: 1302px;
  height: 244px;
  background: #f7f8fa;
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 26px;
}
.box_right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  margin-left: 16px;
  height: 160px;
}
.box_img {
  width: 138px;
  height: 160px;
}
.box_name {
  font-family: SourceHanSansSC, SourceHanSansSC;
  font-weight: bold;
  font-size: 28px;
  color: #2e2f34;
}
.box_text {
  font-family: SourceHanSansSC, SourceHanSansSC;
  font-weight: 400;
  font-size: 18px;
  color: #333333;
}
.box_text_hd {
  font-family: SourceHanSansSC, SourceHanSansSC;
  font-weight: bold;
  font-size: 24px;
  color: #0365fe;
}
.box_experience {
  font-family: SourceHanSansSC, SourceHanSansSC;
  font-weight: 400;
  font-size: 18px;
  color: #333333;
}
/* 定义动画的关键帧 */
@keyframes slideRight {
  0%,
  25% {
    transform: translateX(0%);
  }
  25%,
  50% {
    transform: translateX(100%);
    opacity: 0;
  }
  50%,
  55% {
    transform: translateX(0%);
    opacity: 0;
  }
  55%,
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
@keyframes slideLeft {
  0%,
  25% {
    transform: translateX(0%);
  }
  25%,
  50% {
    transform: translateX(-100%);
    opacity: 0;
  }
  50%,
  55% {
    transform: translateX(0%);
    opacity: 0;
  }
  55%,
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
</style>
